<template>
<!-- 区域管理 -->
<div>
  <div class="search">
     <span class="span1">区域管理:</span> <el-input type="text" autocomplete="off" placeholder="请输入" v-model="input"></el-input>  <el-button type="primary"  icon="el-icon-search">搜索</el-button>
  </div>
  <div class="box">
  <el-button type="primary" icon="el-icon-circle-plus-outline" @click="change('add')" >新建</el-button>
  <!-- ============================== -->
<div class="box1">
  <el-dialog :title="regiontext" :visible.sync="dialogFormVisible" width="630px" >
  <el-form :model="form" :rules="rules">
    <el-form-item label="区域名称:" :label-width="formLabelWidth" prop="name" >
      <el-input v-model="form.name" autocomplete="off" placeholder="请输入..."></el-input>
    </el-form-item>
    <br>
     <el-form-item label="区域名称:" :label-width="formLabelWidth"  prop="region">
    <textarea  v-model="form.remark" autocomplete="off" placeholder="请输入备注(不超过40字)"  style="min-height: 33px; height: 163px; width:396px"></textarea>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer" >
    <el-button @click="open1()">取 消</el-button>
    <el-button type="primary" @click="open()">确 定</el-button>
  </div>
</el-dialog>
</div>
  <!-- ============================== -->
   <el-table
    :data="RegList"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod"
      label="序列号"
      width="200">
          <!-- <template >
        <span style="margin-left: 10px">{{1}}</span>
      </template> -->
    </el-table-column>
     <el-table-column
      label="区域名称"
      width="400">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="点位数"
      width="400">
      <template slot-scope="scope" >
        <span style="margin-left: 10px">{{ scope.row.nodeCount  }}</span>
      </template>
    </el-table-column>
   <el-table-column
      label="备注说明"
      width="450">
      <template slot-scope="scope" >
        <span style="margin-left: 10px">{{ scope.row.remark  }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="viewdetails(scope.row.id)"
         >查看</el-button>
          <el-button
          size="mini"
          v-model="form"
         @click="change('modify',scope.row)"
         >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <div class="page-turner">
    <div class="text">
      <p>共{{this.totalList.totalCount}}条记录</p>
      <p>第 {{ this.totalList.pageIndex }}/{{ this.totalList.totalPage }} 页</p>
    </div>
    <el-row>
      <el-button plain :disabled="params.pageIndex===1?true:false" size="small" @click="before"
        >上一页</el-button
      >
      <el-button plain :disabled="this.totalList.totalPage===  this.params.pageIndex" size="small" @click="next"
        >下一页</el-button
      >
    </el-row>
  </div>
  <!-- ========== -->
<el-dialog title="区域详情" :visible.sync="centerDialogVisible"  width="500px"  close="hidden" >
      <span>
        区域名称: <span></span>
      </span>
      <div>
        <span class="pg">包含点位:
  <el-table :data="xxx">
    <el-table-column type="index"  label="序列号" width="100"> </el-table-column>
     <el-table-column
      label="设备编号"
      width="100"
      prop="addr"
      >
    </el-table-column>
    <el-table-column
    prop="vmCount"
      label="设备状态"
      width="300">
    </el-table-column>
  </el-table> </span>
      </div>
</el-dialog>

  </div>
</div>
</template>

<script>
import { Regional, Regadd, Regedit, Regdetails, Regmodify } from '@/api/poinGG'
export default {
  name: 'Regional-page',
  components: {

  },
  props: {},
  data() {
    return {
      list: {
        remark: '',
        regionName: ''
      },
      centerDialogVisible: false,
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      input: '',
      RegList: [],
      indexNum: 0,
      dialogFormVisible: false,
      form: {
        name: '',
        remark: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      totalList: 0,
      regiontext: '',
      form1: {
        name: '',
        nodeCount: 0,
        remark: ''
      },
      id1: '',
      params1: {},
      xxx: [],
      ccc: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.RegionalList()
  },
  methods: {
    // 查看详情
    async viewdetails(id) {
      this.centerDialogVisible = true
      this.params1.regionId = id
      const res = await Regdetails(this.params1)
      this.xxx = res.currentPageRecords
    },
    // 新增和删除复用
    async change(value, id) {
      this.id1 = id
      console.log(this.id1)
      if (value === 'add') {
        this.regiontext = '新增区域'
        this.dialogFormVisible = true
      } else if (value === 'modify') {
        this.regiontext = '修改区域'
        this.form.name = this.id1.name
        this.form.remark = this.id1.remark
        this.dialogFormVisible = true
      }
    },
    // 新增
    async open() {
      if (this.regiontext === '新增区域') {
        try {
          // 发送请求
          await Regadd(this.form)
          // 添加提示
          this.$message.success('添加成功')
          // 重新渲染
          await this.RegionalList()
          // 关闭弹窗
          this.handelBule()
        } catch (err) {
          console.log(err)
        }
      }
      if (this.regiontext === '修改区域') {
        try {
          this.list.remark = this.form.remark
          this.list.regionName = this.form.name
          await Regmodify(this.id1.id, this.list)
          this.$message.success('修改成功')
          this.handeldate()
          this.RegionalList()
        } catch (err) {
          console.log(err)
          this.$message.error('修改失败')
        }
      }
    },
    // 下一页
    next() {
      this.params.pageIndex++
      this.RegionalList(this.params)
    },
    // 上一页
    before() {
      this.params.pageIndex--
      this.RegionalList(this.params)
    },
    // 取消添加
    open1() {
      if (this.regiontext === '新增区域') {
        this.$message.error(' 你已取消添加')
        this.handelBule()
      }
      if (this.regiontext === '修改区域') {
        this.$message.error(' 你已取消修改')
        this.handelBule()
      }
    },

    handleEdit(index, row) {
      console.log(index, row)
    },

    // 删除
    async handleDelete(id) {
      try {
        // 发请求
        await Regedit(id)
        // 提示删除成功
        this.$message.success('删除成功')
        // 重新渲染页面
        this.RegionalList()
      } catch (err) {
        console.log(err)
        this.$message.error('演示数据禁止删除')
      }
    },
    async RegionalList(params) {
      const res = await Regional(params)
      this.totalList = res
      this.RegList = res.currentPageRecords
    },
    indexMethod(index) {
      return index + this.indexNum + 1
    },
    // 封装方法关闭弹窗,并清空内容
    handelBule() {
      this.dialogFormVisible = false
      this.form.name = ''
      this.form.remark = ''
    },
    handeldate() {
      this.dialogFormVisible = false
      this.form.name = ''
      this.form.remark = ''
    }
  }
}
</script>

<style scoped lang="scss">

.xobx{
  width: 300px;
  margin-left: 20px;
}
::v-deep .el-dialog{
  height: 400px;
}
.page-turner {
  width: 100%;
  height: 100px;
  background:#3c6df3;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    display: flex;
    p {
      margin: 10px;
      font-size: 16px;
      color: #dbdfe5;
    }
  }
  .el-row {
    .el-button {
      margin: 0 15px;
    }
  }
}
.box1{
  // text-align: center;
  color: #000;
}
.el-button--primary {
    color: #FFF;
    // background-color: #409EFF;
    // border-color: #409EFF;
    margin-left: 10px;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
}

.search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 64px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    width: 300px;
    display: flex;
    align-content: center;
    padding: bottom 50px;

}
::v-deep .el-input__inner{
  height: 36px;
  line-height: 36px;
  width: 201px;
}
.el-button.is-circle {
  background-color: #2a95f9;
}
.el-button.is-round {
    border-radius: 20px;
    padding: 12px 23px;
    margin-left: 20px;
}
</style>
